"""
@author: Gaoyaoxia
@date: 2020-08-04 17:14:32
"""
<!-- 情感检索环状图 -->
<template>
  <div :id="id" :style="{height: height, width: width}"></div>
</template>

<script>
import echarts from "echarts";
export default {
  props: {
    id: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "260px",
    },
    data: {
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
      default: "",
    },
    clickFuc: {
      type: Function,
      default: (params) => {},
    },
    color: {
        type: Array,
        default: () => []
    }
  },
  data() {
    return {
      chart: null,
      legend1: [],
      legend2: [],
      legend3: [],
      legend4: [],
      legend5: [],
    };
  },
  methods: {
    getlegendData() {
      if (this.data.length === 0) {
        return;
      }
      this.legend1 = [];
      this.legend2 = [];
      this.legend3 = [];
      this.legend4 = [];
      this.legend5 = [];
      this.data.forEach((item, index) => {
        if (index < 2) {
          this.legend1.push(item.name);
        } else if (index >= 2 && index < 4) {
          this.legend2.push(item.name);
        } else if (index >= 4 && index < 6) {
          this.legend3.push(item.name);
        } else if (index >= 6 && index < 8) {
          this.legend4.push(item.name);
        } else {
          this.legend5.push(item.name);
        }
      });
    },
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id));
      const option = {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a}: {c} ({d}%)",
        },
        legend: [
          {
            type: "scroll",
            x: "42%",
            top: "15%",
            formatter: ["{a|{name}}"].join("\n"),
            textStyle: {
              rich: {
                a: {
                  width: 280,
                  fontSize: 12,
                  lineHeight: 12,
                },
              },
            },
            itemWidth: 12,
            itemHeight: 12,
            data: this.legend1,
          },
          {
            type: "scroll",
            x: "42%",
            top: "30%",
            formatter: ["{a|{name}}"].join("\n"),
            textStyle: {
              rich: {
                a: {
                  width: 280,
                  fontSize: 12,
                  lineHeight: 12,
                },
              },
            },
            itemWidth: 12,
            itemHeight: 12,
            data: this.legend2,
          },
          {
            type: "scroll",
            x: "42%",
            top: "45%",
            formatter: ["{a|{name}}"].join("\n"),
            textStyle: {
              rich: {
                a: {
                  width: 280,
                  fontSize: 12,
                  lineHeight: 12,
                },
              },
            },
            itemWidth: 12,
            itemHeight: 12,
            data: this.legend3,
          },
          {
            type: "scroll",
            x: "42%",
            top: "60%",
            formatter: ["{a|{name}}"].join("\n"),
            textStyle: {
              rich: {
                a: {
                  width: 280,
                  fontSize: 12,
                  lineHeight: 12,
                },
              },
            },
            itemWidth: 12,
            itemHeight: 12,
            data: this.legend4,
          },
          {
            type: "scroll",
            x: "42%",
            top: "75%",
            formatter: ["{a|{name}}"].join("\n"),
            textStyle: {
              rich: {
                a: {
                  width: 280,
                  fontSize: 12,
                  lineHeight: 12,
                },
              },
            },
            itemWidth: 12,
            itemHeight: 12,
            data: this.legend5,
          },
        ],
        series: [
          {
            name: "评论数",
            type: "pie",
            radius: [44, 120],
            center: ["20%", "50%"],
            roseType: "area",
            data: this.data,
            label: {
              normal: {
                show: true,
                position: "outer",
                formatter: "{d}%",
                borderWidth: 20,
                borderRadius: 4,
                padding: [0, 10],
              },
            },
          },
        ],
        color: this.color,
      };
      this.chart.setOption(option);
    },
  },
  mounted() {
    this.getlegendData();
    this.initChart();
  },
  destroyed() {
    if (!this.chart) {
      return;
    }
    this.chart = null;
  }, //生命周期 - 销毁完成
  watch: {
    data: {
      handler(newVal, oldVal){
        console.log("监听：", newVal)
        if(this.chart){
          //销毁
          this.chart.dispose();
          if(newVal){
            this.initChart();
          } 
        } else{
          this.initChart();
        }
      },
      deep: true //对象内部属性的监听
    }
  }
};
</script>
<style lang='stylus' scoped></style>